﻿@inject IStringLocalizer<CheckboxListShowLabel> Localizer

<div class="row g-3">
    <div class="col-12">
        <CheckboxList TValue="IEnumerable<int>" Items="@Items1" @bind-Value="@Value1" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
    </div>
    <div class="col-12">
        <label class="form-label">@Localizer["Foo.BindValue"]</label>
        <div class="form-control">@(string.Join(",", Value1))</div>
    </div>
</div>
<p class="mt-3">@((MarkupString)Localizer["Description"].Value)</p>
<div class="row g-3">
    <div class="col-12">
        <CheckboxList TValue="IEnumerable<string>" Items="@Items2" @bind-Value="@Value2" ShowLabel="true" DisplayText="@Localizer[nameof(Foo.Name)]" />
    </div>
    <div class="col-12">
        <label class="form-label">@Localizer["Foo.BindValue"]</label>
        <div class="form-control flex-fill">@(string.Join(",", Value2))</div>
    </div>
</div>

@code {
    [NotNull]
    private IEnumerable<SelectedItem>? Items1 { get; set; }

    [NotNull]
    private IEnumerable<SelectedItem>? Items2 { get; set; }

    private IEnumerable<int> Value1 { get; set; } = new int[] { 9, 10 };

    private IEnumerable<string> Value2 { get; set; } = new string[] { "13", "15" };

    /// <summary>
    /// OnInitialized method
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items1 = new List<SelectedItem>(new List<SelectedItem>
        {
            new SelectedItem { Text = "Item 9", Value = "9" },
            new SelectedItem { Text = "Item 10", Value = "10" },
            new SelectedItem { Text = "Item 11", Value = "11" },
            new SelectedItem { Text = "Item 12", Value = "12" },
        });

        Items2 = new List<SelectedItem>(new List<SelectedItem>
        {
            new SelectedItem { Text = "Item 13", Value = "13" },
            new SelectedItem { Text = "Item 14", Value = "14" },
            new SelectedItem { Text = "Item 15", Value = "15" },
            new SelectedItem { Text = "Item 16", Value = "16" },
        });
    }
}
